<!--
 * @Author: GKN
 * @Date: 2023-10-24 11:53:29
 * @LastEditTime: 2024-01-02 10:55:32
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\user\member\tag.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div v-loading="loading">
        <div class="flex flex-w">
            <div class="subscribe" v-for="(item,i) in list_subscribe" :key="i">
                <div :class="item.select?'active item':'item'" @click="click_subscribe(i,item.select)">
                    {{item.name}}
                </div>
                
            </div>
        </div>
        <div class="btn-submit cursor-p" @click="submit" style="margin:100px auto;">提交</div>
    </div>
    
</template>

<script setup>
import { ref,reactive,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
const list_subscribe = ref([])
    const list_select_subscribe = ref([])
    const theme_list = ref([])
    const getUserInfo=()=>{
        const loginData = JSON.parse(localStorage.getItem( 'loginData' ))
        if(loginData){
            proxy.$comJs.getUserInfo((res)=>{
                list_subscribe.value.forEach(item => {
                    // 检查id是否在tag数组中
                    if (res.tag.includes(item.id.toString())) {
                        // 如果在，将select属性设置为true
                        item.select = true;
                    }
                });
            })
        }
        
        
    }
    
    const getTheme=()=>{
        proxy.$http.request(proxy.$api.tag+'/1','get',{},false, function (res) {
            if(res&&res.data){
                list_subscribe.value = []
                res.data.data.list.map((item)=>{
                    list_subscribe.value.push({
                        ...item,
                        select:false
                    })
                })
                getUserInfo()
            }
        })
    }
    getTheme()
    const setOf_subscribe =()=>{
        list_select_subscribe.value = []
        list_subscribe.value.map((item)=>{
            if(item.select){
                list_select_subscribe.value.push(item)
            }
        })
    }
    const click_subscribe = (i,type)=>{
        
        if(list_select_subscribe.value.length<5){
            list_subscribe.value[i].select = !type
            setOf_subscribe()
        }else{
            proxy.$comJs.msg('error','最多选择五个')
        }
        
    }
    const submit=()=>{
        var list = []
        list_select_subscribe.value.map((item)=>{
            list.push(
                item.id.toString()
            )
        })
        proxy.$http.request(proxy.$api.put_tag,'put',{"tag":list},false, function (res) {
            if(res&&res.data){
                if(res.data.code != 0){
                    proxy.$comJs.msg('error','提交失败')
                }else{
                    proxy.$comJs.msg('success','提交成功')
                }
            }
        })
    }
</script>

<style lang='less' scoped>
.subscribe{
    // width: 25%;
    padding: 14px;
    .item{
        border-radius: 28px;
        border:1px solid #e9e9e9;
        color: #333;
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
        text-align: center;
        padding: 0 20px;
    }
    .active{
        background: #d00b00;
        color: #fff;
    }
}
/deep/ .el-input--large .el-input__wrapper{
    padding: 0 0px;
    background:#f6f7f9;
}
/deep/ .el-textarea__inner{
    background:#f6f7f9;
}
::v-deep {

.el-input__inner {
  border: 0;
  border-radius: 0px;

  // &:focus {
  //   border-bottom: 1px solid #409eff;
  // }
}

.el-textarea__inner {
  resize: none;
  /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
  border: 0;
  border-radius: 0px;

  // &:focus {
  //   border-bottom: 1px solid #409eff;
  // }
}
}
</style>
  
  


